Tips Pemula Baca Meletakan Konten Dalam Halaman Web 1

Tips Pemula Baca Meletakan Konten Dalam Halaman Web

Desain website adalah tentang menentukan dan menata konten di jendela browser. Konten bisa berbentuk teks maupun gambar. Paragraf, teks, dan gambar memegang peranan cukup penting dalam desain Website. Tips Pemula Baca Meletakan Konten Dalam Halaman Web Oleh karena itu, kita perlu mengetahui tag dan aturan menulis kode HTML untuk membuat paragraf, teks, serta gambar yang menarik.

Tag Paragraf

Sebuah paragraf dapat diisi dengan teks, tabel, maupun gambar. Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML sederhana. Contoh penggunaan tag paragraf untuk membuat paragraf baru adalah sebagai berikut:

Jalankan kode HTML di atas (setelah anda simpan dalam bentuk file HTML) dan akan terlihat gambar seperti berikut :

Terlihat dalam jendela browser kalau kedua paragraf tersebut tidak dipisah pada baris berbeda namun berada pada satu baris yang sama walaupun dalam penulisannya dipisah. Dalam HTML, baris baru yang tidak ditandai dengan tag akan diabaikan. Dengan begitu, kode HTML di atas pada dasarnya tidak menghasilkan tampilan berbeda dengan kode HTML di bawah ini:

Kalau kita ingin memisah dua baris teks itu, kita harus memberi tahu web browser bahwa keduanya harus dibuat terpisah. Salah satunya adalah dengan membuat tag untuk paragraf

HTML menyediakan tag khusus untuk membuat paragraf, yaitu tag <p>. pad kode HTML dibawah ini, kita akan menambahkan tag <p> pada masing-masing baris teks dan melihat bagaimana hasilnya dalam jendela browser.

Kali ini akan melihat bahwa kedua paragraf sudah berada pada posisi masing-masing, yaitu satu teks dalam satu baris.

Dua buah paragraf untuk masing-masing teks

Tag <break>

Selain tag <p> untuk membuat paragraf baru, cara lain untuk memisahkan teks-teks menjadi baris yang berbeda-beda adalah dengan menggunakan tag <br> (break). Dengan demikian, anda bisa menulis contoh penggunaan tag <br> berikut ini:

dan hasilnya

Penggunaan tag <br> untuk membuat baris baru pada teks

Jika kode HTML di atas ditampilkan pada jendela browser, hasilnya hampir sama dengan menggunakan tag <p>. Namun pemisahan baris menggunakan tag <br> tidaklah dimaksudkan untuk membuat paragraf baru. Tag <br> hanya sekadar berfungsi untuk membuat baris baru. Umumnya, tag <br> diletakkan di dalam tag <p>... </p>

Tag untuk Menebalkan dan Memiringkan Teks

Di dalam sebuah paragraf, kadang-kadang kita ingin membuat penekanan pada bagian teks tertentu, Penekanan ini bisa dilakukan dengan berbagai cara, misalnya dengan menebalkan atau memiringkan teks tersebut.

Ada beberapa metode untuk menebalkan namun umumnya dengan memanfaat yang terdiri dari dua tag, yaitu:

<em> untuk memiringkan teks
<strong> untuk menebalkan teks

Contoh penggunaan tag <em> dan <strong> di dalam kode HTML adalah sebagai berikut :

Dan Hasilnya

Penggunaan tag <em> dan <strong> pada teks

Selain <em> dan <strong>, Anda juga bisa menggunakan tag <i> (Italic) untuk memiringkan huruf dan <b> (Bold) untuk menebalkan huruf.

Heading

Dokumen, seperti buku, umumnya dibuat berstruktur yang ditandai dengan adanya judul, sub judul, sub sub judul atau bab, subbab, subsubbab, dan seterusnya.

Di dalam HTML, struktur dokumen pun bisa dibuat menggunakan tag tertentu. HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih dikenal dengan istilah heading. Heading dibuat terpisah dari paragraf karena tag Heading biasanya digunakan untuk pembuatan judul dari suatu paragraf atau bagian dari teks yang dianggap sebagai judul.

Tag heading di dalam HTML terdiri dari 6 jenis yang mewakili masing-masing tingkatan, yaitu mulai dari <h1>, <h2>, <h3>, <h4>, <h5>, dan yang terakhir <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold) dengan ukuran yang beragam. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan tag <h6> berukuran terkecil.

Berikut adalah contoh penggunaan tag heading di dalam HTML:

Dan Hasilnya

Urut-urutan heading dari 1 hingga 6

Dalam Praktiknya, tag heading dikombinasikan dengan tag paragraf agar terbentuk struktur dokumen yang enak dan dipahami. Berikut adalah contoh struktur dokumen HTML, sederhana dengan menggunakan tag <p> dan beberapa tag heading.

Dengan menggunakan beberapa tag heading dan paragraf, kita bisa membuat struktur dokumen menggunakan HTML.

Struktur dokumen yang dibuat menggunakan tag heading dan paragraf

Jika Anda belajar tentang SEO (Search Engine Optimization), gunakan tag heading ini dengan baik. Search Engine, misalnya Google, akan memberikan nilai lebih untuk teks yang ditulis sebagai heading. Semakin tinggi tingkat heading pada sebuah teks, semakin tinggi

pula penekanan search engine. Sebagai contoh, tag <h1> dianggap lebih bernilai daripada <h2>, dan seterusnya karena tag <hl> umumnya digunakan untuk mewakili judul sebuah konten/ berita sehingga dianggap dapat mewakili keseluruhan isi.

Mengenal List

List adalah sebuah daftar. Dalam HTML, list dibuat menggunakan tag bernama list. Tag ini sendiri terdiri dari dua jenis, yaitu ordered list (untuk membuat list berurutan) dan unordered list (untuk membuat list tidak berurutan). Maksudnya, ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list disajikan dengan bulatan atau kotak.

Ordered list dibuat dengan menggunakan tag <ol>, dan unordered list dibuat dengan menggunakan tag <ul>. Sedangkan isi dari list itu sendiri dibuat dengan menggunakan tag <li>.

Ordered List

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag <ol>:

Dan Hasilnya

Ordered list di dalam jendela browser

Style untuk List

Bulleted dan Numbered List dapat dipercantik dengan menggunakan attribute list-style-type, Sebagai contoh, Anda tidak mau poin-poin yang ditulis menggunakan angka 1, 2, 3, dan seterusnya namun ingin memakai angka Romawi I II, III. Atau Anda ingin poin-poin dalam Bulleted List memanfaatkan kotak-kotak kecil berwarna hitam alih-alih lingkaran.

Berikut tabel penggunaannya:

Atribut ini diletakan di dalam tag <ul> atau <ol> sebagai contoh. Anda bisa menuliskannya seperti ini :

Atau jika menggunakan ordered list, anda bisa menuliskannya seperti ini :

Berikut salah satu script HTML yang lengkap tentang penggunaan atribut di atas :

Mengatur urutan Numbered List

Apabila anda menggunakan list, angka yang muncul di poin pertama tidak harus selalu angka 1. Anda bisa memulainya dari angka 3,4,10 atau angka berapapun yang anda inginkan

Caranya adalah dengan menggunakan atribut start. jadi kalau anda ingin memulai numbered list dari angka 10 Anda bisa menulis seperti ini.

Apabila Anda ingin agar salah satu poin memiliki urutan yang berbeda dibanding urut-urutan sebelumnya, Anda bisa menggunakan atribut value yang diletakkan di dalam tag <li>.

Berikut salah satu contoh penggunaan atribut start dan value di atas:

Menggunakan Definition List

HTML menyediakan tag khusus untuk membantu Anda mendefinisikan sesuatu. Sebagai contoh, apabila Anda ingin mendesain web page ilmiah yang di dalamnya terdapat kata yang harus didefinisikan, Anda bisa memanfaatkan Definition List ini.

Untuk membuat Definition List yang lengkap, hendaknya kita memanfaatkan struktur yang tepat. Dimulai dengan penggunaan two sided tag <dl> yang merupakan singkatan dari definition list. Lantas, kata-kata yang ingin didefinisikan ditulis di dalam two sided tag <dt> yang merupakan singkatan dari definition term. Definisi dari kata tersebut ditulis di dalam two sided tag <dd>, singkatan dari definition description.

Berikut salah satu contoh penggunaan definition list :

Karakter-Karakter Spesial

Apa itu karakter-karakter spesial (special characters)? Istilah ini mengacu pada karakter-karakter yang tidak ditemukan di keyboard yang kita pakai sehari-hari. Sebagai contoh, Anda tidak akan! menemukan karakter seperti ©, ®, dan ™ di dalam keyboard. Lantas bagaimana menghadirkan karakter-karakter itu?

Dalam dunia HTML, karakter-karakter tersebut disebut entities dan untuk membuatnya, Anda harus mengawalinya dengan sebuah “ampersand” atau dikenal dengan tanda “&”. Jadi urut-urutannya, tanda “&”", entities, dan diakhiri dengan semicolon atau lebih dikenal dengan istilah “titik koma”.

Selain karakter-karakter spesial di atas yang tidak ditemukan di dalam keyboard, ada beberapa karakter lain yang harus dihadirkan menggunakan entities karena karakter itu dianggap secara langsung sebagai kode HTML. Misalnya saja tanda “<” dan “>” yang dipakai sebagai pembuka dan penutup tag. Anda tidak bisa menulis kedua tanda lebih-besar dan lebih-kecil di atas, secara langsung di dalam script HTML.

Untuk menulis karakter-karakter spesial di atas, gunakan tabel berikut:

Berikut salah satu script HTML yang melibatkan Pengguna, karakter-karakter spesial di atas:

Menggunakan Horizontal Line

Horizontal Line—atau garis horizontal—merupakan sebuah garis yang memisahkan satu bagian dan bagian lain dalam sebuah desain, page. Sebagai contoh, apabila Anda ingin mengakhiri sebuah teks dengan kata-kata penutup, misalnya informasi copyright, alam kontak, dan sebagainya, Anda bisa memanfaatkan Horizontal Line. Untuk menciptakan horizontal line, cukup gunakan one sided ta <hr>. Cukup tuliskan seperti script di bawah ini:

Berhubung Disini Materi kita Panjang karena begitu detail. Jadi untuk artikel ini saya buat bagian untuk artikel yang anda baca ini bagian 1 ya untuk bangain 2 nya di tunggu Enjoy Life!

Tips Pemula Baca Meletakan Konten Dalam Halaman Web 1